<!-- 数据大屏 -->
<template>
    <div class="container">
        <div class="screen" ref="screen">
            <Top />
            <div class="bottom">
                <div class="left">
                    <Tourist />
                    <Sex />
                    <Age />
                </div>
                <div class="middle">
                    <Map class="map" />
                    <Line class="line" />
                </div>
                <div class="right">
                    <Rank />
                    <Annual />
                    <Summery />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Top from './components/top.vue'

// 引入左侧三个组件
import Tourist from './components/tourist.vue';
import Sex from './components/sex.vue';
import Age from './components/age.vue';
// 引入中间两个组件
import Map from './components/map/map.vue';
import Line from './components/line.vue';
// 引入右侧三个组件
import Rank from './components/rank.vue';
import Annual from './components/annual.vue';
import Summery from './components/summery.vue';

// 获取数据大屏div的DOM元素
let screen = ref();
onMounted(() => {
    // 按屏幕尺寸进行缩放
    screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
});
// 根据设计稿与屏幕的宽高比例，获取缩放比例
function getScale(w = 1920, h = 1080) {
    const ww = window.innerWidth / w;
    const wh = window.innerHeight / h;
    return ww < wh ? ww : wh;
}
// 监听视窗变化
window.onresize = () => {
    // 调整展示内容比例
    throttle(() => {
        screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
    }, 300);
}
// 节流函数
let timer: number | null = null
const throttle = (fn: Function, delay: number) => {
    console.log('test')
    if (timer) return;
    timer = setTimeout(() => {
        console.log('success');
        fn();
        timer = null;
    }, delay)
}

</script>

<style scoped lang="scss">
.container {
    width: 100vw;
    height: 100vh;
    background: url(./images/bg.png) no-repeat;
    background-size: cover;

    .screen {
        // 假设为原稿的宽高
        width: 1920px;
        height: 1080px;
        position: fixed;
        left: 50%;
        top: 50%;
        // 以左上角为中心进行缩放
        transform-origin: left top;

        .bottom {
            display: flex;
            height: 1040px;
            color: white;

            // 左中右比例为1：2：1
            .left {
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            .middle {
                flex: 2;
                display: flex;
                flex-direction: column;
                margin: 0 10px;

                .map {
                    flex: 3;
                }

                .line {
                    flex: 1;
                }
            }

            .right {
                flex: 1;
                display: flex;
                flex-direction: column;
            }
        }
    }
}
</style>
